

<template>
    <div>

        <AddEvent v-if="isshow" @showClick="showClick" @addEvent="addEvent">新建待办</AddEvent>

        <EditEvent v-if="isshowEdit" @showClick="showClick" :clickTask="clickTask" >修改待办</EditEvent>
    </div>
    <div class="common-layout">
      
    

        
                
                <div class="aside">
                    <div class="header_button">
                        <el-button disabled circle type="info">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        </el-button> &nbsp;
                        <el-button round type="success" @click="deleteEvents()" class="add">完成勾选项&nbsp;<el-icon>
                            <Check />
                            </el-icon>
                        </el-button>
                        <el-button round type="primary" @click="showAddEventDialog()" class="add">新建待办 &nbsp;<el-icon>
                                <CirclePlus />
                            </el-icon>
                        </el-button>
                    </div>
                 
                        <el-empty v-show="isEmpty" :image-size="200"  description="今天暂无待办哦···" />
             

                
                        <el-timeline v-show="!isEmpyty">
                            <el-timeline-item v-for="(activity, index) in SelecteddayActives" :key="index"
                                    :icon="activity.icon" :type="activity.type" :color="getLevelColor(activity.level)"
                                    :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp"
                                    placement="top">

                                    <el-tag class="ml-2" :type="activity.level === '' ? 'info' : activity.level === 'normal' ? '' :activity.level === 'priority' ? 'success' : activity.level === 'emergent' ? 'warning' : activity.level === 'important' ? 'danger' : ''">{{ getLevelText(activity.level) }}</el-tag>

                                    <div class="item_content"  :class="{ active: isActive.includes(index) }" @click="touch(index)">
                                        <p> {{ activity.content
                                    }}</p>
                                        <div class = "item_content_controller">
                                            <el-button @click="showEditEventDialogBtn(index)" type="primary" icon="Edit" circle />
                                            <el-button @click="deleteEventBtn(index)" type="danger" icon="Close" circle />
                                            <el-button @click="finishedEventBtn(index)" type="success" icon="finished" circle />
                                        </div>
                                    </div>
                                    <el-divider border-style="dotted" />
                            </el-timeline-item>

                        </el-timeline>
                  
                </div>


                <div class="historyList">
                    <div class="historyToggleTitle">
                            <p class="title">展开历史完成待办</p>
                            <el-switch v-model="historyToggle" />
                    </div>
                  
                    <div class="slide_list">
                        <div :class="historyToggle ? 'OnToggle' : 'OffToggle'"
                        >
                        <el-timeline>

                                <el-timeline-item v-for="(activity, index) in showAllFinishedEvents" :key="index"
                                    :icon="activity.icon" :type="activity.type" :color="activity.color"
                                    :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp"
                                    placement="top">

                                    <p style="word-wrap: break-word; word-break: break-all;"> {{ activity.content }}</p>
                                    <el-divider border-style="dotted" />
                                </el-timeline-item>

                        </el-timeline>
                    </div>
                    </div>
                    
                </div>

      
    </div>
</template>



<script>
import mitt from '../utils/mitt.js'
import AddEvent from './dialog/EditEventDialog.vue';
import EditEvent from './dialog/EditEventDialog.vue';
import useStore from '../store'
import requestMethods from '../api/api';
import { ElNotification } from 'element-plus';

export default {
    components: { AddEvent,EditEvent },
    data() {
        return {
            isshow: false,
            isshowEdit: false,
            activities: [],
            isActive: [],
            todayList: [],
            historyToggle: true,
            clickTask:{}
        };
    },
    mounted() {
       
        requestMethods.getAllTasks()
        .then(res =>
            {
            this.activities = res.data.tasklist
            console.log(this.activities)
            console.log(this.activities)
            useStore().user.updateTaskList(res.data.tasklist)
            
            console.log(res)})
        .catch(error => console.log(error))
        
    },
    created(){
      

        mitt.on('getSelectedDate', () => {
            
            this.todayList = useStore().user.getSelectedDateList
            
        })
    },
    computed: {
        SelecteddayActives: function () {
            if (this.activities) {
                return this.activities.filter(function (item) {
                    return (item.status == 'doing' && item.timestamp == useStore().user.getSelectedDay)
                })
            }
            return [];
        },

        showAllFinishedEvents: function () {

            if (this.activities) {
                return this.activities.filter(function (item) {
                    return (item.status == 'finished')
                })
            }
            return [];
        },

        isEmpty: function() {
          
            if(this.SelecteddayActives.length == 0) 
                {
                   
                  return true
                    
                }else{
                    return false
                }
          
        }
    },
   
    methods: {
        deleteEventBtn(e){
            console.log(e);
            console.log(this.showSelecteddayActivesList[e]);
            this.showSelecteddayActivesList[e].status = 'deleted'
        },
        finishedEventBtn(e){

            let clickTaskId = this.SelecteddayActives[e]._id

            requestMethods.finishedTagetTask(clickTaskId)
                .then(res=>{
                    console.log(res)
                    console.log()
                    this.SelecteddayActives[e].status = 'finished'
                })
                .catch(error=>{
                    console.log(error)
                });
                ElNotification({
                    title: 'Success',
                    message: '完成事件成功' + 'id:' + this.SelecteddayActives[e]._id ,
                    type: 'success',
                })
            console.log(this.SelecteddayActives[e]._id)
            console.log(this.SelecteddayActives);
           
        },
        showAddEventDialog() {
            this.isshow = true
        },
        showEditEventDialogBtn(e) {
            this.clickTask =  this.SelecteddayActives[e]
            console.log(this.clickTask);
            this.isshowEdit = true
        },
        deleteEvents() {
            if (this.isActive.length > 0) {
                for (let i = this.isActive.length - 1; i >= 0; i--) {

                    requestMethods.finishedTagetTask((this.showSelecteddayActivesList[this.isActive[i]]._id)
                    .then(res=>{
                        console.log(res)
                    })
                    .catch(err=>{
                        console.log(err)
                    }))
                
                    console.log(this.showSelecteddayActivesList[this.isActive[i]]);
                    this.showSelecteddayActivesList[this.isActive[i]].status = 'finished'
                }
                console.log(this.showActivesList);
                console.log(this.activities);
                useStore().user.updateTodoList(this.activities)

                this.$message.success('清除任务成功')
                this.isActive = []
            } else {
                this.$message.info('暂无选中事项')
            }

        },
        touch(index) {
            console.log(index);

            if (this.isActive.includes(index)) {
                //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
                //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
                this.isActive = this.isActive.filter(function (ele) {
                    console.log(ele != index);
                    return ele != index;
                });

                console.log(this.isActive);
            } else {
                this.isActive.push(index);
            }
            this.isActive.sort()

        },
        showClick(val) {

            this.isshow = val.addEventDialog
            this.isshowEdit = val.addEventDialog
        },
        getLevelType(level) {
        switch (level) {
            case 'priority':
            return 'success'
            case 'emergent':
            return 'warning'
            case 'important':
            return 'danger'
            default:
            return ''
        }
        },
        getLevelText(level) {
        switch (level) {
            case 'normal':
            return '普通'
            case 'priority':
            return '优先处理'
            case 'emergent':
            return '紧急'
            case 'important':
            return '重要'
            default:
            return '未分类事件'
        }
      

    },
    getLevelColor(level){
       
            switch(level){
                case 'normal':
                return '#409eff'
                case 'priority':
                return '#67c23a'
                case 'emergent':
                return '#e6a23c'
                case 'important':
                return '#f56c6c'
                default:
                return '#909399'
            }
        }


    }
}
</script>

<style lang="less" scoped>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";


.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    height: 0;
}


    .el-header {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        padding: 10px 0;
        .add {
            width: 14vh;
            font-weight: lighter;
            font-size: 14px;
            letter-spacing: 0.2rem;
        }
    }

    .common-layout{
        
        background-color: #F5F7FA;

        .aside {
            border-radius: 25px 25px 25px 25px;
            background-color: #fff;
            min-height: 4rem;
            padding-top:10px;
            .header_button{
                text-align: end;
                margin-right: 4rem;
                line-height: 2rem;
            }
        }

        .historyList {
            border-radius: 25px;
            background-color: #fff;
            padding: 10px 0;
            margin-top: 40px;
         
            .historyToggleTitle {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 20%;
                margin-left: 4rem;
                background-color: #fff;
                
                p {
                    padding-right: 10px;
                    font-weight: 600;
                    color: #666;
                 
                }
            }


           .slide_list{
            min-width: 100%;
            .OffToggle{
                max-height:2px;
               overflow: hidden;
               transition: max-height 1s ease;
            }
                
               
                .OnToggle{
                    background-color: #fff;
                    transition: max-height 1s ease;
                    max-height: 4000px;
                    overflow: hidden;
                }
           }
            
        }

        :deep(.el-timeline) {
            
            .el-timeline-item {
                padding: 20px;
              

            
                .el-timeline-item__wrapper {
                    

                    .el-timeline-item__timestamp.is-top {
                        text-align: left;
                        font-weight: bold;
                        padding-bottom: 20px;
                    }

                    .el-timeline-item__content {
                        font-size: 1.1rem;
                        font-weight: normal;
                        letter-spacing: 2px;
                        text-align: left;
                        align-items: center;
                        .el-tag{
                            position: absolute;
                            top: 0;
                            left: 140px;
                        }
                        .item_content {
                            transition: all .2s ease;
                            border-radius: 15px;
                            padding: 0px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            
                            .item_content_controller{
                                
                                display: none;
                            }

                            p{
                                word-wrap: break-word;
                                word-break: break-all; 
                            }
                        }

                        .item_content:hover {
                            transition: all .2s ease;
                  
                            background-color: aliceblue;
                            padding: 20px;
                            p{
                                transition: fadein 0.4s ease;
                                max-width: 74%;
                            }
                            .item_content_controller{
                                display: block;
                                min-width: 20%;
                                transition: fadein 0.2s ease;
                            }
                        }
                        
                        .active {
                            padding: 20px;
                            transition: all .2s ease;
                            // text-decoration: line-through;
                            background-color: aliceblue;
                          
                        }
                    }
                }

            }
        }

    }
@keyframes fadein{
    0%{
        opacity: 0;
    }25%{
        opacity: 0.2;
    }50%{
        opacity: 0.5;
    }75%{
        opacity: 0.7;
    }100%{
        opacity: 1;
    }
}


</style>